<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="form-box" v-loading='loading'>
            <div class="form-title">编辑视频</div>
            <el-form :model="dataForm" :rules="rules" ref="dataForm" label-width="80px" class="form" label-position='left'>
                <div class="form-item">
                    <div class="form-item-title">
                        <!-- <span class="note-css"></span> -->
                        <span class="title-level">基本信息</span>
                    </div>
                    <div class="form-content">
                        <el-row :gutter="21" class="item">
                            <el-col :span="12">
                                <el-form-item label="视频名称" prop="sVideoName" :rules="rules.sVideoName">
                                    <el-popover
                                    placement="top-start"
                                    trigger="focus" 
                                    content="长度在20个字符以内。">
                                        <el-input v-model="dataForm.sVideoName" slot="reference" :maxlength="20" placeholder="请输入视频名称" style="width:90%"></el-input>
                                    </el-popover>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="视频封面（300*200）" label-width="160px" prop="sCoverUrl" :rules="rules.sCoverUrl">
                                    <!-- <img-upload 
                                    @remove="fileImgRemove" 
                                    :file-list.sync="imgOptions.fileList" 
                                    :file-list-show.sync="imgOptions.fileListShow" 
                                    :list-type="imgOptions.listType"
                                    :up-file-type="imgOptions.upFileType"
                                    :accept-list="imgOptions.accept"
                                    @onSuccess="imgSuccessFn"
                                    >
                                        <div class="up-container el-upload">
                                            <i class="el-icon-plus"></i>
                                        </div>
                                    </img-upload> -->
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21" class="item">
                            <el-col :span="24">
                                <el-form-item>
                                    <img-upload 
                                    @remove="fileImgRemove" 
                                    :file-list.sync="imgOptions.fileList" 
                                    :file-list-show.sync="imgOptions.fileListShow" 
                                    :list-type="imgOptions.listType"
                                    :up-file-type="imgOptions.upFileType"
                                    :accept-list="imgOptions.accept"
                                    @onSuccess="imgSuccessFn"
                                    :imgSize='0.09765625'
                                    >
                                        <div class="up-container el-upload">
                                            <i class="el-icon-plus"></i>
                                        </div>
                                    </img-upload>
                                    <p class="code">建议尺寸300*200或3:2，JPG、PNG格式，图片小于100K。</p>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21" class="item">
                            <el-col :span="12">
                                <el-form-item label="视频上传" prop="sVideoUrl" :rules="rules.sVideoUrl">
                                    <img-upload  
                                    @remove="fileFileRemove" 
                                    :file-list.sync="fileOptions.fileList" 
                                    :file-list-show.sync="fileOptions.fileListShow" 
                                    :list-type="fileOptions.listType"
                                    :up-file-type="fileOptions.upFileType"
                                    :accept-list="fileOptions.accept"
                                    @onSuccess="fileSuccessFn"
                                    @getFileName="getFileName"
                                    >
                                        <el-button type="default">上传附件</el-button>
                                        <!-- <div slot="tip" class="tip">支持MP4、MP3格式，视频小于100M。</div> -->
                                    </img-upload >
                                    <p class="code">仅支持MP4格式H.264 视频编码的视频，视频小于500M。</p>
                                    <div v-if="dataForm.sVideoUrl">
                                        <video style="max-width: 600px;max-height:650px" controls :autoplay="false" buffered :src="dataForm.sVideoUrl"></video>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21" class="item">
                            <el-col :span="22">
                                <el-form-item label="视频介绍" prop="sDesc" :rules="rules.sDesc">
                                    <Tinymce :height="260" :id="tinymceId" ref="dataForm.sDesc" v-model="dataForm.sDesc"></Tinymce>
                                    <p>编辑器内容输入不要超过6000字符！</p>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item-title">
                        <!-- <span class="note-css"></span> -->
                        <span class="title-level">上架信息</span>
                    </div>
                    <div class="form-content">
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="付费形式" prop="sPayType" :rules="rules.sPayType">
                                    <el-radio class="radio" v-model.number="dataForm.sPayType" :label="0">免费</el-radio>
                                    <el-radio class="radio" v-model.number="dataForm.sPayType" :label="1">优惠</el-radio>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="41" v-if="dataForm.sPayType == 1">
                            <div class='original-price'>
                                <el-col :span="5">
                                    <el-form-item label="原价" label-width="60px" prop="sOriginalPrice" :rules="rules.sOriginalPrice">
                                        <el-input v-model="dataForm.sOriginalPrice" style="width:100%;"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="5">
                                    <el-form-item label="现价" label-width="60px" prop="sNowPrice" :rules="rules.sNowPrice">
                                        <el-input v-model="dataForm.sNowPrice" :disabled="true" style="width:100%;"></el-input>
                                    </el-form-item>
                                </el-col>
                            </div>
                        </el-row>
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="所属分类" prop="sType" :rules="rules.sType">
                                    <el-radio class="radio" v-model="dataForm.sType" :label="0">课内</el-radio>
                                    <el-radio class="radio" v-model="dataForm.sType" :label="1">课外</el-radio>
                                </el-form-item>
                            </el-col>
                        </el-row>
                       <el-row :gutter="21" v-if="dataForm.sType == 0" class="subject-radio"> 
                            <el-col :span="6">
                                <el-form-item label="" label-width="0px" prop="fResGraduateId" :rules="rules.fResGraduateId">
                                    <el-select v-model="dataForm.fResGraduateId" placeholder="请选择年级" style="width:100%;">
                                        <el-option v-for="item in gradeList" clearable :key='item.code' :label='item.name' :value='item.code'></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="" label-width="0px" prop="fResSubjectId" :rules="rules.fResSubjectId">
                                    <el-select v-model="dataForm.fResSubjectId" placeholder="请选择科目" style="width:100%;" @change="changeSubject">
                                        <el-option v-for="item in subjectList" clearable :key='item.summaryCode' :label='item.summaryName' :value='item.summaryCode'></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="" label-width="0px" prop="knowledgePointName" :rules="rules.fResTagId">
                                    <el-autocomplete v-model="dataForm.knowledgePointName" :fetch-suggestions="remoteMethod" placeholder="请输入搜索知识点" style="width:100%" @select="getknowledgePointId"></el-autocomplete>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21" v-else class="subject-radio">
                            <el-col :span="6">
                                <el-form-item label="" prop="fTypeId" :rules="rules.fTypeId" label-width="0px">
                                    <el-select v-model="dataForm.fTypeId" clearable placeholder="请选择" style="width:100%;">
                                        <el-option v-for="item in classifyList" :key='item.pId' :label='item.sName' :value='item.pId'></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="权重" prop="sPriority" :rules="rules.sPriority">
                                    <el-popover
                                    placement="top-start"
                                    trigger="focus" 
                                    content="请输入不超出5位的数字。">
                                        <el-input v-model="dataForm.sPriority" slot="reference" :maxlength="5" style="width:150px;" placeholder="请输入权重"></el-input>
                                    </el-popover>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item-title">
                        <!-- <span class="note-css"></span> -->
                        <span class="title-level">用户评价（{{this.pageQuery.total}}）</span>
                    </div>
                    <div class="form-content">
                        <el-table :data="tableData"  style="width: 100%" :show-header='true' v-loading='commentLoading'>                     
                            <el-table-column prop="creatorName" label="用户名称" width="140px"></el-table-column>
                            <el-table-column prop="sContent" label="评论内容"></el-table-column>
                            <el-table-column label="操作" width="100px">
                                <template scope="scope">
                                    <el-button type="text" class="btn-success" @click="deleteComment(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-row type="flex" class="row-bg" justify="end">
                            <div class="pagination-container">
                                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="pageQuery.total" :current-page.sync="pageQuery.currentpage" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                                </el-pagination>
                            </div>
                        </el-row>
                    </div>
                </div>
                <div class="form-item">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item>
                                <div class="footer">
                                    <el-button @click="resetForm('dataForm')">取消</el-button>
                                    <el-button type="primary" @click="submitForm('dataForm')" :disabled="!this.dataForm.sCoverUrl || !this.dataForm.sVideoUrl || !this.dataForm.sDesc">确认</el-button>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
    import { isEmpty } from 'utils/validate';
    import Levelbar from '../../../layout/Levelbar';
    import imgUpload from 'components/Upload/fileUpload';
    import Tinymce from 'components/Tinymce';
    import {getGuidanceInfo, updateGuidance, pageScholarComment, deleteScholarComment, listGuidanceType, listSubject, listGraduate, listTagBySubject} from 'api/onlineTutor';
    import { mapState, mapActions } from 'vuex';
    export default {
        name: 'editVideo',
        components: { Levelbar, imgUpload, Tinymce },
        data() {
            const validateEmpty = (rule, value, callback) => {
                if (!isEmpty(value)) {
                    callback(new Error('内容中不能存在空格'));
                } else {
                    callback();
                }
            };
            return {
                loading: false,
                tinymceId: 'tinymceId',
                commentLoading: false,
                initState: true,
                gradeList: [],
                subjectList: [],
                classifyList: [],
                knowledgePointList: [],
                tableData: [],
                pageQuery: {
                    currentpage: 1,
                    total: 0
                },
                imgOptions: {
                    upFileType: 'image',
                    fileListShow: true,
                    fileList: []
                },
                fileOptions: {
                    upFileType: 'video',
                    fileListShow: true,
                    fileList: []
                },
                dataForm: {
                    videoFileName: '',
                    sVideoName: '',
                    sCoverUrl: '',
                    videoUrl: '',
                    sDesc: '',
                    sPayType: 0,
                    sOriginalPrice: null,
                    sNowPrice: '0.00',
                    sType: 0,
                    fResGraduateId: '',
                    fResSubjectId: '',
                    fResTagId: '',
                    knowledgePointName: '',
                    knowledgePointId: '',
                    fTypeId: '',
                    sPriority: null 
                },
                rules: {
                    sVideoName: [
                        { required: true, message: '视频名称不能为空！', trigger: 'blur' },
                        { required: true, trigger: 'blur', validator: validateEmpty },
                        { max: 20, min: 1, message: '长度在20个字符以内', trigger: 'blur' }
                    ],
                    sCoverUrl: [
                        { required: true, message: '请上传图片', trigger: 'change' }
                    ],
                    sVideoUrl: [
                         { required: true, message: '请上传视频', trigger: 'change' }
                    ],
                    sDesc: [
                        { required: true, message: '请编写文字', trigger: 'change' }
                    ],
                    sPayType: [
                        { required: true, type: 'number', message: '请选择', trigger: 'blur' }
                    ],
                    sOriginalPrice: [
                        { required: true, message: '内容不能为空'},
                        { pattern: /^(([1-9]\d*)|(([0]\.\d{1,2})|([1-9]\d*\.\d{1,2})))$/, message: '请输入1~1000的数值，小数点保留两位'},
                        { validator: (rule, value, callback) => {
                            if (Number(value)>1000) {
                                callback(new Error('请输入1~1000的数值，小数点保留两位'));
                            } else {
                                callback();
                            }
                        }, trigger: 'blur' }
                    ],
                    sNowPrice: [
                        // { required: true, message: '内容不能为空'},
                        // { type: 'number', message: '内容必须为数字值'}
                    ],
                    fTypeId: [
                        { required: true, message: '请选择活动资源', trigger: 'change' }
                    ],
                    fResGraduateId: [
                        { required: true, message: '内容不能为空' }
                    ],
                    fResSubjectId: [
                        { required: true, message: '内容不能为空' }
                    ],
                    fResTagId: [
                        { required: true, message: '内容不能为空' }
                    ],
                    sPriority: [
                        { pattern: /^\d{0,5}$/, message: '请输入不超出5位的数字', trigger: 'blur' }
                    ]
                }
            };
        },
        computed: {
            ...mapState({
                config: state => state.config.table
            })
        },
        created() {
            this.listGuidanceTypeFu();
            this.listSubjectFu();
            this.gradeListFu();
            this.getGuidanceInfoFu();
            this.pageScholarCommentFu();
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            handleSizeChange(val) {
                this.pageQuery.currentpage = 1;
                this.ChangePageSize(val);
                this.pageScholarCommentFu();
            },
            handleCurrentChange(val) {
                this.pageQuery.currentpage = val;
                this.pageScholarCommentFu();
            },
            remoteMethod(query, cb) {
               
                query=this.dataForm.knowledgePointName;
                query = query.trim();
                if (query=='') {
                    cb([{value: '无数据'}]);
                    this.$nextTick(() => {
                        let firstSelect=$('.el-autocomplete-suggestion__list li:first');
                        firstSelect.addClass('remoteMethodScy');
                    })
                }
                if (query && this.dataForm.fResSubjectId) {
                    let summaryKey = ''; 
                    this.subjectList.some(item => {
                        if (item.summaryCode == this.dataForm.fResSubjectId) {
                            summaryKey = item.summaryKey;
                        }
                    });
                    listTagBySubject(summaryKey, query).then(response => {
                        this.knowledgePointList = response.data.content;
                    }).then(() => {
                        let results = this.knowledgePointList.filter(this.createStateFilter(query));
                        clearTimeout(this.timeout);
                        this.timeout = setTimeout(() => {
                            if (results.length) {
                                let firstSelect=$('.el-autocomplete-suggestion__list li:first');
                                firstSelect.removeClass('remoteMethodScy');
                                cb(results)
                            } else {
                                cb([{value: '无数据'}]);
                                this.$nextTick(() => {
                                    let firstSelect=$('.el-autocomplete-suggestion__list li:first');
                                    firstSelect.addClass('remoteMethodScy')
                                })
                            }
                        }, 200 * Math.random());
                    });
                } else {
                    this.knowledgePointList = [];
                    this.dataForm.knowledgePointName = '';
                    this.dataForm.knowledgePointId = '';
                    query = '';
                    cb([{value: '无数据'}]);
                    this.$nextTick(() => {
                        let firstSelect=$('.el-autocomplete-suggestion__list li:first');
                        firstSelect.addClass('remoteMethodScy')
                    })
                }  
            },
            createStateFilter(query) {
                return (state) => {
                    state.value = state.tagName; 
                    return (state.value.toLowerCase().includes(query.toLowerCase()));
                };
            },

            changeSubject() {
                if (!this.initState) {
                    this.knowledgePointList = [];
                    this.dataForm.knowledgePointName = '';
                    this.dataForm.knowledgePointId = '';
                }
                this.initState = false;
               
            },

            // 获取知识点id
            getknowledgePointId(val) {
                if (val.tagId) {
                    this.dataForm.knowledgePointId = val.tagId;
                } else {
                    this.dataForm.knowledgePointName = '';
                }
                
            },

            // 所属分类
            listGuidanceTypeFu() {
                listGuidanceType().then(response => {
                    if (response.data.status == 200) {
                        this.classifyList = response.data.content;
                    } else {
                        this.$message.error(response.data.errorMsg);
                    }
                    
                }).catch((e) => {
                    // this.loading = false;    
                });
            },

            // 查询年级
            gradeListFu() {
                listGraduate().then(response => {
                    if (response.data.status == 200) {
                        this.gradeList = response.data.content;
                    } else {
                        this.$message.error(response.data.errorMsg);
                    }
                    
                }).catch((e) => {
                    // this.loading = false;    
                });
            },

            // 查询科目
            listSubjectFu() {
                listSubject().then(response => {
                    if (response.data.status == 200) {
                        this.subjectList = response.data.content; 
                    } else {
                        this.$message.error(response.data.errorMsg);
                    }
                    
                }).catch((e) => {
                    // this.loading = false;    
                });
            },

            // 移除图片
            fileImgRemove(file) {
                this.dataForm.sCoverUrl = '';
            },

            // 上传图片成功后获取图片路径
            imgSuccessFn(obj) {
                this.dataForm.sCoverUrl = `${obj.imgUrl}?imageView2/2/w/300/h/200`;
            },

            // 移除文件
            fileFileRemove(file) {
                this.dataForm.sVideoUrl = ''; 
            },

            // 上传文件成功后获取文件路径
            fileSuccessFn(obj) {
                this.dataForm.sVideoUrl = obj.imgUrl;
            },   

            // 获取上传文件名
            getFileName(file) {
                this.dataForm.videoFileName = file.name;
            },    
            
            // 获取学科辅导信息
            getGuidanceInfoFu() {
               
                let pId = this.$route.params.pid;
                this.loading = true;
                getGuidanceInfo(pId).then(response => {
                    this.loading = false; 
                    if (response.data.status == 200) {
                        
                        this.dataForm = response.data.content;
                        this.dataForm.fResTagId = String(response.data.content.fResTagId);
                        this.dataForm.sOriginalPrice = Number(response.data.content.sOriginalPrice).toFixed(2);
                        this.dataForm.sNowPrice = Number(response.data.content.sNowPrice).toFixed(2);
                        
                        if (this.dataForm.sVideoUrl) {
                            this.fileOptions.fileList.push({name: this.dataForm.sVideoName, url: this.dataForm.sVideoUrl});
                        }
                        
                        if (this.dataForm.sCoverUrl) {
                            this.imgOptions.fileList.push({name: this.dataForm.sVideoName, url: this.dataForm.sCoverUrl});
                        }
                        
                        this.dataForm.knowledgePointId = this.dataForm.fResTagId;
                    } else {
                        this.$message.error(response.data.errorMsg);
                    }
                    
                }).catch((e) => {
                    this.loading = false;    
                });
            },

            submitForm(dataForm) {
                this.$refs[dataForm].validate(valid => {
                    if (valid) {
            
                        let pId = this.$route.params.pid; // 学科辅导Id
                        let sVideoName = this.dataForm.sVideoName; // 视频名称
                        let sCoverUrl = this.dataForm.sCoverUrl;  // 封面路径
                        let sVideoUrl = this.dataForm.sVideoUrl; // 视频路径
                        let sDesc = this.dataForm.sDesc;     // 商品描述
                        let sType = this.dataForm.sType;      // 所属分类0：课内；1：课外
                        let sPayType = this.dataForm.sPayType; // 付费形式0：免费，1：优惠
                        let fTypeId = this.dataForm.fTypeId;// 课外必传
                        let sPriority = this.dataForm.sPriority;  // 权重 //可不传 
                        let sOriginalPrice = Number(this.dataForm.sOriginalPrice).toFixed(2);
                        let sNowPrice = Number(this.dataForm.sNowPrice).toFixed(2); // 现价

                        let fResGraduateId = this.dataForm.fResGraduateId; // 年级id (课内必传)
                        let fResSubjectId = this.dataForm.fResSubjectId; // 科目id (课内必传)
                        let fResTagId = this.dataForm.knowledgePointId; // 知识点Id(课内必传) 
                        let knowledgePointName = this.dataForm.knowledgePointName;


                        if (!this.dataForm.sCoverUrl) {
                            this.$message.error('请上传封面');
                            return false;
                        }
                        if (!this.dataForm.sVideoUrl) {
                            this.$message.error('请上传视频');
                            return false;
                        }

                        let tempHtml = window.tinymce.get('tinymceId').getContent({format: 'raw'});
                        if (tempHtml.indexOf('img') === -1) {
                            if (!window.tinymce.get('tinymceId').getContent({format: 'text'}).trim()) {
                                this.$message.error('请输入视频介绍');
                                return false;
                            }
                        }
                        if (window.tinymce.get('tinymceId').getContent({format: 'text'}).trim().length > 6000) {
                            this.$message.error('视频介绍字数过多');
                            return false;
                        }
                        
                        this.$confirm('是否保存?', ' ', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: ' '
                        }).then(() => {
                            this.loading = true;
                            updateGuidance(pId, sVideoName, sCoverUrl, sVideoUrl, sDesc, sType, sPayType, fTypeId, sPriority, sOriginalPrice, sNowPrice, fResGraduateId, fResSubjectId, fResTagId, knowledgePointName).then(response => {
                                this.loading = false;
                                if (response.data.status == 200) {
                                    this.$message.success(response.data.errorMsg);
                                    this.$refs[dataForm].resetFields();
                                    this.$router.push({ path: '/subjectTutor/subjectTutor' });
                                    this.$store.dispatch('UpdateCache', true);
                                } else {
                                    this.$message.error(response.data.errorMsg);
                                }
                            }).catch(() => {
                                this.loading = false;
                            });
                        }).catch(() => {
                            this.$message({type: 'info', message: '已取消'});          
                        });
                    } else {
                        return false;
                    }
                });
            },
            resetForm(dataForm) {

                this.$refs[dataForm].resetFields();
                this.$router.push({ path: '/subjectTutor/subjectTutor' });
            },
            pageScholarCommentFu() {
                let fGuidanceId = this.$route.params.pid; 
                this.commentLoading = true;
                pageScholarComment(this.pageQuery.currentpage, this.config.pageSize, fGuidanceId).then(response => {
                    this.commentLoading = false;
                    if (response.data.status == 200) {
                        this.tableData = response.data.content.list;
                        this.pageQuery.total = response.data.content.pagination.total;  
                    } else {
                        this.$message.error(response.data.errorMsg);
                    }
                }).catch((e) => {
                    this.commentLoading = false;  
                });
            },
            deleteComment(obj) {
                this.$confirm('此操作将永久删除该评论, 是否继续?', ' ', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: ''
                }).then(() => {
                    deleteScholarComment(obj.pId).then(response => {
                        if (response.data.status == 200) {
                            this.pageScholarCommentFu();
                        } else {
                            this.$message.error(response.data.errorMsg);
                        }
                        
                    }).catch((e) => {
                        // this.loading = false;    
                    });
                }).catch(() => {
                    this.$message({type: 'info', message: '已取消'});          
                });
            }
        }
    };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .app-container {
        position: relative;
        padding: 20px 20px 10px;
        $bgcolor: #fff;

        @mixin showTitle() {
            background: $bgcolor;
            box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        }
        .form-box {
            padding: 0px 50px;
            @include showTitle();
            .form-title {
                padding-top:8px;
                text-align: center;
                font-size: 18px;
                color: #333;
                line-height: 72px;
                font-weight: bold;
                font-family: Microsoft YaHei;
                border-bottom: 1px solid #ddd;
            }
            .form {
                .form-item {
                     padding-bottom: 40px;
                    .form-item-title {
                        margin: 40px 0;
                        font-size: 14px;
                        color: #333;
                        line-height: 14px;
                        border-left: 4px solid #ff5e2c;
                        text-indent: 16px;
                        .note-css {
                            vertical-align: middle;
                            display: inline-block;
                            width: 4px;
                            height: 14px;
                            margin-right: 16px;
                            border-left: 3px solid #ff5e2c;
                        }
                    }
                    .form-content {
                        margin: 0 8px;
                        .original-price {
                            padding-left:102px;
                            // overflow:hidden;
                            margin-bottom: 20px;
                        }
                        .subject-radio {
                            padding-left:82px;
                        }
                        .item {
                            margin-bottom: 20px;
                        }
                    }
                    .item {
                        margin-bottom: 20px;
                        .code{
                            font-size: 14px;
                            color: #ccc;
                        }
                    }
                    .back {
                        margin-top: 20px;
                    }
                    .footer {
                        text-align: center;
                        margin-top: 40px;
                    }
                    .title-way {
                        padding-right: 15px;
                    }
                    .control {
                        text-align: right;
                    }
                }
            }
        }
    }
</style>